<template>
  <div class="detail-container">
    <!-- 系统信息 -->
    <el-card shadow="never">
      <div slot="header">
        <span>系统信息</span>
      </div>
      <el-row class="sysInfo">
        <el-col :xs="24" :sm="12" :lg="6">
          <label>负责人：</label>
          <span>{{ sysForm.person }}</span>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <label>创建人：</label>
          <span>{{ sysForm.createBy }}</span>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <label>更新时间：</label>
          <span>{{ sysForm.updateDate }}</span>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <label>创建时间：</label>
          <span>{{ sysForm.createDate }}</span>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <label>所属区域：</label>
          <span>{{ sysForm.area }}</span>
        </el-col>
      </el-row>
    </el-card>

    <!-- 信息化投入现状 表格 -->
    <el-card shadow="never" class="mt24">
      <div slot="header">
        <span>信息化投入现状</span>
      </div>
      <el-table ref="informationTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <template slot="empty">
          <el-empty image-size="110" />
        </template>
        <el-table-column label="已购买产品" align="center" prop="products" />
        <el-table-column label="购买日期" align="center" prop="purchaseTime" />
        <el-table-column label="系统版本" align="center" prop="edition" />
        <el-table-column label="预估费用" align="center" prop="estimatedCost" />
        <el-table-column label="供应商" align="center" prop="supplier" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button size="small" type="text" @click="handleEdit(row)">编辑</el-button>
            <el-divider direction="vertical" />
            <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red" title="确认删除该条信息吗?" @confirm="handleDelete(row)">
              <el-button slot="reference" size="small" type="text">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-button plain icon="el-icon-plus" class="mt16" style="width:100%" type="small" @click="handleAdd">新增</el-button>
    </el-card>

    <infomation-drawer ref="infomation" :show.sync="infomation.open" @close="getList" />
  </div>
</template>

<script>
import InfomationDrawer from '../modules/infomationDrawer'
export default {
  name: 'InformationTable',
  components: { InfomationDrawer },
  data() {
    return {
      infomation: {
        open: false
      },
      // 系统信息表单
      sysForm: {
        person: '张三',
        createBy: '崔皓栋',
        updateDate: '2020-05-21',
        createDate: '2020-05-25',
        area: '公海'
      },
      // 信息化投入现状表格
      tableData: [
        {
          products: '华为云服务',
          purchaseTime: '2020-05-21',
          edition: 'linux',
          estimatedCost: '1500',
          supplier: '华为'
        },
        {
          products: 'Windows',
          purchaseTime: '2020-05-21',
          edition: 'win10',
          estimatedCost: '500',
          supplier: '微软'
        }
      ]
    }
  },
  methods: {
    getList() {},
    // 新增
    handleAdd() {
      this.infomation.open = true
      this.$refs.infomation.add()
    },
    // 编辑
    handleEdit(row) {
      this.infomation.open = true
      this.$refs.infomation.edit(row)
    },
    handleSelectionChange() {},
    handleDelete(row) {}
  }
}
</script>

<style lang='scss' scoped>
@import '~@/assets/styles/details.scss';
.sysInfo {
  padding: 0 36px;
  line-height: 2.5;
  font-size: 14px !important;

  label {
    color: $title_color;
  }

  span {
    color: $content_color;
  }
}
</style>
